<link rel="stylesheet" href="<%= basePath%>/lib/sui.min.css">
<link rel="stylesheet" href="<%= basePath%>/lib/sui-append.min.css">
<link rel="stylesheet" href="<%= basePath%>/public/iconfont/iconfont.css">
<link rel="stylesheet" href="<%= basePath%>/public/css/style.css">
<link rel="stylesheet" href="<%= basePath%>/modules/teacher/css/style.css">

<script type="application/javascript" src="<%= basePath%>/lib/jquery.min.js"></script>
<script type="application/javascript" src="<%= basePath%>/lib/sui.min.js"></script>
<script type="application/javascript" src="<%= basePath%>/public/js/util.js"></script>
<script type="application/javascript" src="<%= basePath%>/modules/teacher/js/query.js"></script>

<div class="body_scroll">
    <div class="frame-content">
        <ul class="info_list">
            <li class="li_info">
                <span class="iconfont" style="color: #5396f1; float: left">&#xe61f;</span>
                <form class="sui-form form-horizontal" style="float: left; margin: 0">
                    <div class="control-group" style="margin: 0">
                        <span style="font-size: 14px">&nbsp;日期：</span>
                        <div class="input-control control-right">
                            <input type="text" data-toggle="datepicker" class="input-start-time date_input_top" style="width: 150px">
                            <i class="sui-icon iconfont table_header_date_icon">&#xe605;</i>
                        </div>
                        <span style="font-size: 14px; margin-left: 25px"> 至：</span>
                        <div class="input-control control-right">
                            <input type="text" data-toggle="datepicker" class="input-end-time date_input_top" style="width: 150px">
                            <i class="sui-icon iconfont table_header_date_icon">&#xe605;</i>
                        </div>
                    </div>
                </form>
                <span style="font-size: 14px; margin-left: 20px">&nbsp;&nbsp;状态：</span>
                        <span class="sui-dropdown dropdown-bordered table_header select">
                            <span class="dropdown-inner">
                            <a role="button" data-toggle="dropdown" class="dropdown-toggle" id="status_select">
                                <input type="hidden" value="0" id="teacher_search_status"><i class="caret"></i><span>全部</span>
                            </a>
                            <ul role="menu" aria-labelledby="status_drop" class="sui-dropdown-menu menu-status">
                                <li role="presentation" class="active"><a role="menuitem" tabindex="-1" value="0">全部</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" value="1">出勤</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" value="-2">迟到</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" value="-3">早退</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" value="3">请假</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" value="-1">旷课</a></li>
                            </ul>
                            </span>
                        </span>
                <br>
                <div style="margin-top: 10px">
                    <span style="margin-top: 5px; margin-left: 20px; display: inline-block">学号：</span>
                    <input type="text" class="input-sid input-fat" style="height: 18px;width: 146px;margin-right: 10px; margin-left: -4px">
                    <span>姓名：</span>
                    <input type="text" class="input-name input-fat" style="height: 18px;width: 146px; margin-left: -4px">
                    <span style="font-size: 14px; margin-left: 16px">&nbsp;&nbsp;班级：</span>

                         <span class="sui-dropdown dropdown-bordered table_header select">
                            <span class="dropdown-inner">
                            <a role="button" data-toggle="dropdown" class="dropdown-toggle" id="class_select">
                                <input type="hidden" value="0" id="teacher_search_class"><i class="caret"></i><span>全部</span>
                            </a>
                            <ul role="menu" aria-labelledby="status_drop" class="sui-dropdown-menu menu-class">
                                <li role="presentation" class="active"><a role="menuitem" tabindex="-1" value="0">全部</a></li>
                                <% teacher.managedClasses.forEach(function(natureClass) {%>
                                <li role="presentation"><a role="menuitem" tabindex="-1" value="<%=natureClass.id%>"><%=natureClass.name%></a></li>
                                <%});%>
                            </ul>
                            </span>
                        </span>
                    <a class="btn-search sui-btn btn-primary teacher_search_btn" style="margin-left: 20px; margin-top: -2px">查询</a>
                </div>
                <div style="clear:both;"></div>
            </li>
            <li class="li_footer">
                <div class="teacher_search_table_div" >
                    <table class="sui-table table-zebra table-bordered attend_table">
                        <thead>
                        <tr>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>应到</th>
                            <th>实到</th>
                            <th>迟到</th>
                            <th>早退</th>
                            <th>缺勤</th>
                            <th>请假</th>
                            <th>出勤率</th>
                            <!--<th>详情</th>-->
                        </tr>
                        <tbody>
                        <% students.forEach(function(student) {
                            var statistics = student.statistics;
                            var totalCount = statistics.attendCount + statistics.totalAbsence;
                            var totalPercent = 0;
                            if ( totalCount > 0 ) {
                                totalPercent = statistics.attendCount / totalCount;
                            }
                        %>
                        <tr>
                            <td><%=student.sid%></td>
                            <td><%=student.name%></td>
                            <td><%=totalCount%></td>
                            <td><%=statistics.attendCount%></td>
                            <td><%=statistics.lateCount%></td>
                            <td><%=statistics.earlyCount%></td>
                            <td><%=statistics.absenceCount%></td>
                            <td><%=statistics.restCount%></td>
                            <td><%=Number(totalPercent * 100).toFixed(2)%>%</td>
                            <!--<td class="attend_search_detail" data-id="<%= student.id%>" onclick="tableDetailButtonClicked(event)">详细 <i class="iconfont icon-arrow-down attend_table_detail_arrow"></i></td>-->
                        </tr>
                        <!--<tr data-id="attend_detail_area<%= student.id%>" class="table_detail_content_hide">-->
                        <!--<td colspan="10" data-id="attend_detail_content<%= student.id%>" class="table_detail_background" style="height: 0; padding: 0; line-height: 0">-->
                        <!--</td>-->
                        <!--</tr>-->
                        <!--<tr style="display: none"></tr>-->
                        <% }); %>
                        </tbody>
                    </table>
                </div>
            </li>
        </ul>
    </div>
</div>
<script>
    $(document).ready(function () {

        var date_from = $('.input-start-time.date_input_top');
        var date_to = $('.input-end-time.date_input_top');

        date_from.change(function () {
            if (!date_from.val()) {
                date_from.datepicker('update', new Date());
            }
            var startTime = new Date(date_from.val());
            var endTime = new Date(date_to.val());
            if (startTime.getTime() > endTime.getTime()) {
                date_to.datepicker('update', date_from.val());
            }
        });

        date_to.change(function () {
            if (!date_to.val()) {
                date_to.datepicker('update', new Date());
            }
            var startTime = new Date(date_from.val());
            var endTime = new Date(date_to.val());
            if (endTime.getTime() < startTime.getTime()) {
                date_from.datepicker('update', date_to.val());
            }
        });

    });
</script>